<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>

    <div id="app">

      <!-- 
        
        解开v-model语法糖的本质 

        实现的目标：① 表单的值由v-model接收的数据决定
                   ② 修改时v-model的数据由input的值决定
      
        分析：目标①可以由v-bind实现 （数据到视图，给表单的value强制绑定数据）
              目标②可以有v-on 实现  （视图到数据，监听表单value的变化改变数据）

        状况：@input中password如何获取
              
        解决：由 v-on 事件对象可知，通过$event.target.value获取

      -->

      请输入用户名：<input type="text" v-model="username">
      请输入密码：<input type="password" :value="password" @input="password=$event.target.value">

    </div>

</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {
         
          username: "豪仔",
          password: "123456",

        };
      },
    });
  </script>


</html>